$(function(){ 	 	  
	  $('#payments').datagrid({
	      url: 'viewOrder',
	      method:'get',
	      rownumbers:true,
	      pagination:true,
	      pageSize:20,
	      pageList:[10,20,30],
	      fitColumns:true,
	      autoRowHeight:true,
	      singleSelect:true,
	      striped:true,
	      idField:'id',
	      columns:[[
	  			  {field:'id', title:'Payment Id'},
	  			  {field:'customer.id', title:'Customer Id', formatter:function(value, row){
	  				  return row.customer.id;
	  			  }},
	  			  {field:'customer.name', title:'Customer Name', formatter:function(value, row){
	  				  return row.customer.name.firstName + '_' + row.customer.name.lastName;
	  			  }},
	  	          {field:'rental.inventory.film.title', title:'Film Title', formatter:function(value, row){
	  	              return row.rental.inventory.film.title;
	  	          }},
	  	          {field:'staff.store.address.address1', title:'Store Address', formatter:function(value, row){
	  	              return row.rental.inventory.store.address.address1;
	  	          }},
	  	          {field:'rental.inventory.film.rentalRate', title:'Rental Rate', formatter:function(value, row){
	  	        	  return '$' + row.rental.inventory.film.rentalRate;
	  	          }},
	  	          {field:'amount', title:'Total Amount', formatter:function(value, row){
	  	        	  return '$' + row.amount;
	  	          }},
	  	          {field:'rental.rentalDate', title:'Rental Date', formatter:function(value, row, index){
	  	        	  return row.rental.rentalDate;
	  	          }},
	  	          {field:'rental.returnDate', title:'Return Date', formatter:function(value, row, index){
	  	        	  if(!row.rental.returnDate){
	  	        		  return '<span sytle=\"color:red;\">Not Returned Yet</span>';
	  	        	  }
	  	        	  return row.rental.returnDate;
	  	          }},
	  	          {field:'opt1', title:' ', formatter:function(value, row){
	  	        	if(!row.rental.returnDate){
	  	        		  return '<a href=\"javascript:void(0)\" onclick=\"finish(' + row.id + ')\">Return It</span>';
	  	        	  }
	  	        	return 'Finished';
	  	          }}
	  	          ]],
	  	        onLoadSuccess:function (data){
	        		if(!data.total) {
	        			$('#tableTitle').text('You have not any order yet');
	        		}else{
	        			$('#tableTitle').text('');
	        		}
	  	        }
	   });

	  $('#onePayment').datagrid({
		  autoLoad:false,
	      url: 'viewOrderById',
	      method:'get',
	      fitColumns:true,
	      autoRowHeight:true,
	      idField:'id',
	      columns:[[
		  			  {field:'id', title:'Payment Id'},
		  			  {field:'customer.id', title:'Customer Id', formatter:function(value, row){
		  				  return row.customer.id;
		  			  }},
		  			  {field:'customer.name', title:'Customer Name', formatter:function(value, row){
		  				  return row.customer.name.firstName + '_' + row.customer.name.lastName;
		  			  }},
		  	          {field:'rental.inventory.film.title', title:'Film Title', formatter:function(value, row){
		  	              return row.rental.inventory.film.title;
		  	          }},
		  	          {field:'staff.store.address.address1', title:'Store Address', formatter:function(value, row){
		  	              return row.rental.inventory.store.address.address1;
		  	          }},
		  	          {field:'rental.inventory.film.rentalRate', title:'Rental Rate', formatter:function(value, row){
		  	        	  return '$' + row.rental.inventory.film.rentalRate;
		  	          }},
		  	          {field:'amount', title:'Total Amount', formatter:function(value, row){
		  	        	  return '$' + row.amount;
		  	          }},
		  	          {field:'rental.rentalDate', title:'Rental Date', formatter:function(value, row, index){
		  	        	  return row.rental.rentalDate;
		  	          }},
		  	          {field:'rental.returnDate', title:'Return Date', formatter:function(value, row, index){
		  	        	  if(!row.rental.returnDate){
		  	        		  return '<span sytle=\"color:red;\">Not Returned Yet</span>';
		  	        	  }
		  	        	  return row.rental.returnDate;
		  	          }},
		  	          {field:'opt1', title:' ', formatter:function(value, row){
		  	        	if(!row.rental.returnDate){
		  	        		  return '<a href=\"javascript:void(0)\" onclick=\"finish(' + row.id + ')\">Return It</span>';
		  	        	  }
		  	        	return 'Finished';
		  	          }}
		  	     ]]
	   });
	  
	  //create easyui table first but do nothing.... 't1
	  $('#inventory').datagrid({
			autoLoad:false
		});
	  
	  $('#returnFilmTable').click(function(){
		  $('html, body').animate({
		        scrollTop: $('#film').offset().top
		    }, 1500);
	  });
}); 

function doSearch(){
    if(!$('#startDate').datebox('getValue') && !$('#endDate').datebox('getValue')){
		 $('#payments').datagrid('load',{
			 memberId: $('#customerId').val()
		 });
	 }else if(!$('#startDate').datebox('getValue')){
		 $('#payments').datagrid('load',{
		        endDate: $('#endDate').datebox('getValue'),
		        memberId: $('#customerId').val()
		 });
	 }else if(!$('#endDate').datebox('getValue')){
		 $('#payments').datagrid('load',{
		        startDate: $('#startDate').datebox('getValue'),
		        memberId: $('#customerId').val()
		 });
	 }else{
		 $('#payments').datagrid('load',{
		        startDate: $('#startDate').datebox('getValue'),
		        endDate: $('#endDate').datebox('getValue'),
		        memberId: $('#customerId').val()
		 });
	 } 
}

function doIdSearch(){
    $('#onePayment').datagrid('load',{
    	paymentId: $('#paymentId').val()
    });
}

function finish(paymentId){
	$.get('finishOrder/' + paymentId, function(result){
		
		//make two tables data view concurrency
		$('#payments').datagrid('reload');
		$('#onePayment').datagrid('reload');
	});
}